<template>
    <div class="content-box">
        <hand-nav :shopingShow="shopingShow" :erjiShow="erjiShow"/>
        <div class="top-image">
            <img src="../../assets/images/swiper3.jpg" alt="">
        </div>
        <!-- 商城列表 -->
        <ShoppingList :topArr='topArr' />
        <!-- 限时秒杀 -->
        <ShoppingSeckill :secKillArr='secKillArr'/>
        <!-- 精品套装以及轮播 -->
        <ShoppingSwiper :swiperArr='swiperArr'/>
        <!-- 特惠专题 -->
        <ShoppingSpecial/>
        <!-- 单品推荐 -->
        <ShoppingRec :recArr='recArr'/>
        <!-- 垫的底部高度 -->
        <div class="mat-foot"></div>
    </div>

</template>

<script>
import ShoppingList from './components/ShoppingList.vue'
import ShoppingSeckill from './components/ShoppingSeckill.vue'
import ShoppingSwiper from './components/ShoppingSwiper.vue'
import ShoppingSpecial from './components/ShoppingSpecial.vue'
import ShoppingRec from './components/ShoppingRec.vue'
import api from "../../api";

export default {
    components:{
        ShoppingList,
        ShoppingSeckill,
        ShoppingSwiper,
        ShoppingSpecial,
        ShoppingRec
    },
    data(){
        return{
            //定义在每个页面购物车 耳机 是否显示
            shopingShow:true,
            erjiShow:true,
            // 轮播
            swiperArr:[],
            // 显示秒杀
            secKillArr:[],
            // 顶部的列表
            topArr:[],
            // 单品推荐
            recArr:[]
        }
    },
    mounted(){
        // 轮播的网络请求
        api.getJxtz().then(res=>{
            //console.log(res.data.list);
           this.swiperArr=res.data.list;
        });
        // 限时秒杀
        api.getXsms().then(res=>{
            //console.log(res.data.list);
            for(var i=0;i<res.data.list.length;i++){
                if(i<=5){
                    this.secKillArr.push(res.data.list[i]);
                }
            }
        })
        // 顶部列表
        api.getShopping().then(res=>{
            //console.log(res.data.list);
            for(var i=0;i<res.data.list.length;i++){
                if(i<=7){
                    this.topArr.push(res.data.list[i])
                }
            }
        })
        // 推荐
        api.getRecommend().then(res=>{
            //console.log(res.data.list);
            this.recArr=res.data.list;
        })
    }

}
</script>

<style lang='less' scoped >
.top-image{
    width: 100%;
    height: 124px;
}
.top-image img{
    width: 100%;
    height: 100%;
}




/* 给底部垫脚 */
.mat-foot{
    width: 100%;
    height: 65px;
}
</style>